/**********
***********
|
| This is designed mobile first, with media queries for larger screens.
|
***********
***********/


/*     Font Declarations
_________________________*/

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@font-face {
  font-family: 'JBU-Custom';
  src: url('https://jbu_ftp.sidearmsports.com/custompages/fonts/JBU Bold Font.ttf');
}

/*  
    To reference fonts, use the following:

        font-family: 'Oswald', sans-serif;
        font-family: 'Roboto', sans-serif;
*/


/*     Global Styles
_________________________*/

body {
  background-image: url("https://jbu_ftp.sidearmsports.com/custompages/css/gameday/background-blue-repeat.jpg");
  background-repeat: repeat;
  background-color: #eeef0;
}

.gameday-dashboard *:not(i),
*:not(i):before,
*:not(i):after {
  word-wrap: break-word;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Oswald', sans-serif;
}

html {
  scroll-behavior: smooth;
}

.gameday-dashboard ul {
  list-style-type: none;
  padding: 0;
}

.gameday-dashboard a,
a:link,
a:visited {
  text-decoration: none;
}

.gameday-dashboard .menu-item a,
.gameday-dashboard .menu-item a:link,
.gameday-dashboard .menu-item a:visited {
  color: currentColor;
}

.gameday-dashboard .grid-content_item a,
.gameday-dashboard .grid-content_item a:link,
.gameday-dashboard .grid-content_item a:visited {
  color: #124E84;
}

/* 
    Global notes:
        Blue:   #124E84
        Yellow: #F9CA24
        Black:  #161313
*/


/*     Shared Styles
_________________________*/

.section-two,
.section-three,
.section-four {
  margin: 0;
  clear: both;
  padding-top: 24px;
}

.section-header {
  border-left: 6px solid #f9ca24;
  background: #124e84;
  color: white;
  margin: 0;
  text-align: left;
  font-size: 1.5rem;
  font-weight: 300;
  padding: 8px 10px 8px 12px;
}

.section-header-twitter {
  border-left: 6px solid #000;
  background: #ec1c24;
  color: white;
  margin: 0;
  text-align: left;
  font-size: 1.5rem;
  font-weight: 300;
  padding: 8px 10px 8px 12px;
}

.grid-content_item .section-header {
  margin: 0 0 8px;
}

.section-header.full-size {
  font-size: 2rem;
  padding: 15px 15px 15px 20px;
  width: 100%;
  font-family: 'Roboto', sans-serif;
}

.section-header.full-size .callout {
  font-style: italic;
  color: #f9ca24;
  font-weight: 400;
  padding-left: 7px;
  display: inline-block;
}

.section-header.full-size.xl,
.section-header.full-size.xl span {
  border-width: 0;
  font-size: clamp(100%, 1.5rem + 2vw, 38px);
  margin-bottom: 20px;
  padding: 15px 15px;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  letter-spacing: 10px;
  line-height: 48px;
}

.section-header.full-size.xl span {
  color: #f9ca24;
  padding: 0;
}


/*     Section One - Gameday Header, Video, Twitter
_________________________*/

.section-one {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

/* Gameday Header */
.gameday-header {
  order: 2;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  padding: 8px 0;
  background: transparent;
  margin-bottom: 24px;
  width: 100%;
  color: #124e84;
}

@media only screen and (min-width: 1050px) {
  .gameday-header {
    order: 1;
  }
}

.gameday-header p {
  display: none;
  margin: 0 24px;
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
  font-weight: 500;
  color: #4a4a4a;
}

.gameday-header p span.second-letter {
  padding: 12px 0 0;
  float: right;
  margin-left: -2px;
}

@media only screen and (min-width: 1050px) {
  .gameday-header p {
    display: block;
  }
}

.gameday-header .team-logo {
  width: 175px;
  height: 175px;
  min-width: 175px;
  min-height: 175px;
  margin: 0 45px;
  background: #124e84;
}

.team-logo img {
  width: 175px;
  height: 175px;
  transition-duration: .2s;
}

.team-logo img:hover {
  transform: scale(1.05);
}

.gameday-header .team-menu.away {
  text-align: right;
}

.gameday-header .away-container,
.gameday-header .home-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* Gameday Header Menu Items */
.team-menu .menu-item {
  font-weight: 300;
  text-transform: uppercase;
  display: inline-block;
}

.team-menu .menu-item::after {
  content: '';
  display: block;
  width: 0%;
  height: 1px;
  background-color: #f9ca24;
  transition: all 0.3s ease;
}

.team-menu .menu-item:hover::after {
  width: 100%;
  transition: all 0.3s ease;
}

.team-menu .stat-caption {
  font-weight: 400;
  color: #161313;
}

/* Custom Layout for Small Screens (not default, uses query) */
@media only screen and (max-width: 700px) {
  .gameday-header {
    flex-direction: column;
  }

  .away-container {
    order: 2;
    margin-left: 48px;
  }

  .home-container {
    order: 1;
    margin-bottom: 24px;
    margin-left: -48px;
  }

  .gameday-header .team-logo {
    margin: 0 16px;
  }
}

/* Twitter Embed */
.twitter-container {
  order: 3;

  height: 500px;
  overflow: hidden;
  width: 80%;
  margin: 0 auto 20px;
}

@media only screen and (min-width: 1050px) {
  .twitter-container {
    order: 2;

    width: 26%;
    margin: 0 0 0 15px;
    min-height: 546px;
  }
}

.twitter-embed {
  height: 100%;
  overflow: scroll;
  border-left: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
  border-top: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.twitter-embed::-webkit-scrollbar {
  display: none;
}

/* Video Embed */
.video-container {
  order: 1;
  width: 100%;
}

@media only screen and (min-width: 1050px) {
  .video-container {
    order: 3;
    width: 70%;
    margin-right: 15px;
  }
}

.video-embed {
  position: relative;
  padding-bottom: 56.25%;
}

.video-container .video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* Video Picture in Picture */
@keyframes fade-in-up {
  0% {
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@media only screen and (min-width: 700px) {
  .video-container .stuck {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 375px;
    height: 211px;
    padding-bottom: 0;
    z-index: 100;
    box-shadow: 8px 8px 12px -6px rgba(0, 0, 0, 0.5);

    transform: translateY(100%);
    animation: fade-in-up .25s ease forwards;
  }
}


/* Buttons Under Video */
.button-header {
  width: 100%;
  max-width: 1416px;
  margin: auto;
}

.button-subheader {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1020px;
  margin: auto;
}

.button-subheader .button-sub-btn {
  display: flex;
  align-items: center;
  border: 2px solid lightgrey;
  text-decoration: none;
  width: calc(33.33% - 20px);
  text-align: center;
  padding: 10px;
  margin: 10px;
  justify-content: center;
  text-transform: uppercase;
  font-size: 1.1rem !important;
  font-weight: 300;
  color: #124e84;
  transition: .3s;
}

.button-subheader i {
  margin-right: 10px;
}

.button-subheader .button-sub-btn:hover {
  color: #fff;
  background-color: #124e84;
  border: 2px solid #1b76c7;
}

@media screen and (max-width: 700px) {
  .button-subheader .button-sub-btn {
    width: 100%;
  }
}


/*     Section Two - Stats
_________________________*/

.section-two {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

/* Stat Embed */
.stat-container {
  width: 100%;
  margin-top: 12px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.stats-sponsor {
  max-width: 120px;
  vertical-align: middle;
}

@media only screen and (max-width: 559px) {
  .stats-sponsor {
    max-width: 0px;
  }
}

.fa-window-restore {
  color: white;
  font-size: 24px;
  vertical-align: 3px;
  margin-right: 15px;
}

.fa-expand {
  color: white;
  font-size: 24px;
  vertical-align: 3px;
  margin-right: 15px;
}

.stats-new-window {
  float: right;
  cursor: pointer;
}

.section-two i {
  opacity: .8;
  transition-duration: .25s;
}

.section-two i:hover {
  opacity: 1;
}

@media only screen and (max-width: 439px) {
  .stats-new-window {
    display: none;
  }
}

@media only screen and (min-width: 1050px) {
  .stat-container {
    width: 100%;
    margin-top: 12px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

.stat-embed {
  position: relative;
  height: 85vh;
}

.stat-container .stat-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Standings Embed */
.standings-container {
  width: 80%;
  margin: 24px auto 0;
  background-color: #eeeef0;
}

@media only screen and (min-width: 1050px) {
  .standings-container {
    width: 26%;
    margin: 0 15px 0 0;
  }
}

.standings-embed {
  height: calc(85vh - 52px);
  overflow: none;
  border: 1px solid #d9d9d9;
}


/*     Section Three - Photo Wall
_________________________*/

.photowall-container {
  overflow: auto;
  margin: 12px 0 0;
}

/* Override Curator.io style */
.photowall-container .crt-logo {
  display: none !important;
}

.photowall-container .crt-widget {
  background-color: unset;
  padding-bottom: 1px !important;
}

.photowall-container .crt-widget .crt-post {
  border-width: 0;
  ;
}


/*     Section Four - Grid of Cards
_________________________*/

.grid-container {
  text-align: center;
}

@media (min-width: 700px) {

  .grid-container,
  .grid-content_row {
    display: flex;
    display: -webkit-flex;
    align-items: stretch;
    -webkit-align-items: stretch;
  }
}

@media (min-width: 1024px) {

  .grid-container,
  .grid-content_row {
    display: flex;
    display: -webkit-flex;
    align-items: stretch;
    -webkit-align-items: stretch;
    justify-content: center;
    -webkit-justify-content: center;
  }
}

/* A row of grid content */
.grid-content_row {
  width: 100%;
}

/* Each Item in a grid container or a grid content group */
.grid-content_item {
  padding: 0;
  border-top: none;
  width: 100%;
  min-width: 1px;
  min-height: 1px;

  margin: 0 1% 2%;
  position: relative;
  overflow: hidden;
  border-left: none;
  transition: box-shadow .2s ease;
  background: transparent;
  box-shadow: 0 1px 4px #ccc;
}


.grid-content_item img {
  box-shadow: 0 1px 4px #ccc;
  overflow: visible;
}


@media (min-width: 700px) {
  .grid-content_item {
    width: 33%;
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
  }
}

/* Images */
.grid-content_item img {
  display: inline-block;
  transition: all .5s;
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

.grid-content_item img:hover {
  transform: scale(1.05);
}


/*     Section Five - Social Media and Newsletter Signup 
_________________________*/

.social-container {
  display: flex;
  display: -webkit-flex;
  width: 100%;
}

@media only screen and (min-width: 1050px) {
  .social-container {
    width: 35%;
    margin: 0 auto 0px;
    border: none;
  }
}

.social-icon {
  flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  min-width: 1px;
  min-height: 1px;
  width: 25%;
  display: flex;
  display: -webkit-flex;
  border: none;
}

.social-icon a {
  display: block;
  width: 100%;
  height: 59px;
  line-height: 59px;
  text-align: center;
  text-decoration: none;
  color: #124E84;
  transition: 0.2s;
}

.social-icon i {
  font-size: 45px;
  transition: filter 0.3s ease;
}

.social-icon:hover i {
  transition: filter 0.3s ease;
  filter: brightness(150%);
}

.social-icon span {
  position: absolute;
  top: -99999px;
  left: -99999px;
  display: block;
  color: white;
  background-color: black;
}

/* Newsletter Signup */
.more-info-container {
  max-width: 850px;
  margin: 40px auto 60px;
  border-radius: 12px;
  width: auto;
  box-shadow: 0 1px 4px #ccc;
  transition: box-shadow .2s ease;
  background-color: white;
}

.more-info-content {
  padding: 4% 2% 4%;
  margin: 0;
}

.more-info-description {
  font-size: 1.6rem;
  font-weight: 300;
  font-style: normal;
  line-height: 1.3;
  color: #1a1a1a;
  text-align: center;
  margin: 0 9% 0;
  font-family: 'Roboto', sans-serif;
}

a.email {
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0 auto 0;
  display: inline-block;
  padding: 7.5px 15%;
  float: none;
  align-items: center;
  border: 2px solid #124e84;
  text-decoration: none;
  justify-content: center;
  text-transform: uppercase;
  color: #124e84;
  transition: .5s;
}

.fa-envelope {
  font-size: 1.4rem;
}

a.email:hover {
  color: #1b76c7;
  border: 2px solid #1b76c7;
}

.fa-envelope {
  margin-left: 10px;
}


/* Footer */
.footer {
  margin: 24px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.footer p {
  font-style: italic;
  font-family: 'Roboto', sans-serif;
  text-align: center;
}

.footer a {
  color: #124e84;
  text-decoration: none;
  background: transparent;
  size: 12px;
  margin: 0 auto;
  padding: 10px 6%;
  transition-duration: .3s;
}

.footer a:hover {
  background-color: rgba(18, 78, 132, .2);
}

.fa-long-arrow-alt-up {
  margin-right: 5px;
}

img.footer-logo:hover {
  -webkit-animation-name: heartbeat;
  -webkit-animation-duration: 300ms;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-iteration-count: 2;
  -webkit-animation-timing-function: linear;
}

@-webkit-keyframes heartbeat {
  0% {
    -webkit-transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}